import React, { useState } from "react";
import { Button, RadioChangeEvent, Radio, Space, Tabs } from "antd";
import { Face, Pose, Hand } from "kalidokit";
import { TabListType } from "./type";
import styles from "./index.less";
import { getData } from "@/api/home";
import { useModel } from "umi";
import AnimationTab from "../../components/AnimationTab/index";

const HomePage: React.FC = () => {
  const { theme } = useModel("useConfig");
  const [bgImg, setBgImgs] = useState<string | null>(null);
  const tabList: TabListType[] = [
    {
      id: 0,
      title: "背景",
      name: "bg",
    },
    {
      id: 1,
      title: "人物",
      name: "model",
    },
    {
      id: 2,
      title: "BGM",
      name: "bgm",
    },
    {
      id: 3,
      title: "视频流",
      name: "video",
    },
    {
      id: 4,
      title: "保存",
      name: "save",
    },
  ];

  // const changeTabPosition = async (e: RadioChangeEvent) => {
  //   setTabPosition(e.target.value);
  //   const res = await getData({
  //     name:'2',
  //     id:'2'
  //   })
  // };

  const setBgImg = (url: string) => {
    console.log(url, "url");
    setBgImgs(url);
  };

  return (
    <div className={styles.main}>
      <div className={styles.leftMenu}>
        <Tabs
          tabPosition="left"
          items={tabList.map((item) => {
            return {
              label: item.title,
              key: `${item.id}`,
              children: <AnimationTab id={item.id} setBgImg={setBgImg} />,
            };
          })}
        />
      </div>
      <div className={styles.rightContent}>{theme.color}</div>
    </div>
  );
};

export default HomePage;
